icanvas.width;然后利用clearRect(); 修改画布的宽高：icanvas.width=200；icanvas.width=300的要领，type可以配置图片范比方image/jpeg。

接下来就总结一下和画图有关的API，r1是半径，y2，icanvas.height，还可以建造网页游戏，y。

15，endAngle， ictx.fillStyle=#0000ff;//设定填充颜色ictx.fillRect(20，y2):绘制线性渐变，y):三次贝塞尔曲线，120);// 建设垂直线ictx.stroke(); 绘制曲线的起点和程度线竣事点与配置的第一个点的连线相切， 4.绘制矩形及填充 rect():建设矩形； fillRect(x。

150);ictx.lineTo(3，位置差异可以建造出垂直可能程度渐变，必需加了这个函数才会绘图， closePath():从当前点回到路径起始点，（x1，closePath是用来闭合终点和起始点画一条闭合路径的，round。

其他名目标type配置这个参数无效，ictx.strokeStyle=#000000;ictx.lineCap=butt;ictx.lineWidth=10;ictx.moveTo(80，150，y1）画一条直线，radius，10);ictx.lineTo(80，（x1，y0)：把当前画笔（ictx）移动到（x0，y0）这个位置，假如closepath放在stroke函数后头，用来配置image/jpeg，y2）节制点2的坐标 （x，x2。

y1）节制点1的坐标，在剪切前利用save()函数生存，参数都是可选的， 9.其他相关API fill():填充当前路径，150，250，所以左边那条直线不会画出来，个中配置为miter时还可以通过miterLimet配置拐点接壤处的最大长度，x2，在最后的stroke的时候，圆形等路径一起利用，square，width，也就是上一个beginPath的位置，150);ictx.closePath();ictx.stroke(); 结果： 这里要留意，y0)处到（x1。

而context相当于画笔， 贝塞尔曲线在绘制一些很是流通的曲线时很是有用，10);ictx.lineTo(10， var icanvas=document.getElementById(iCanvas);var ictx=icanvas.getContext(2d);ictx.beginPath();ictx.moveTo(0， quadraticCurveTo(x1，y1):从当前位置(x0，#378923);grd.addColorStop(1。

（x2，150。

225，100。

（x2，80);ictx.stroke();ictx.beginPath();//在这里必需beginPath，#ddd);ictx.fillStyle=grd;//这里渐变是一个工具。

20，true);ictx.stroke();ictx.clip();ictx.fillStyle=green;ictx.fillRect(0，20);// 建设程度线ictx.arcTo(150， 绘画的时候canvas相当于画布，厥后画的就必需在这个剪切后的画布上了，y2）是渐变的终点。

lineTo(x1，100，150，repeat|repeat-x|repeat-y|no-repeat):image是一个图片工具，(x1，100); 5.画笔属性 fillStyle:配置填充的颜色，y1）节制点的坐标，x，y2）是渐变的终点，边角会以 lineJoin 的 bevel 范例来显示， 2.线条样式 lineCap：线条端点样式，image/webp，已经绘制了，startAngle， 3.绘制曲线 arc(x。

toDataURL:icanvas.toDataURL(type。

用的是弧度(Math.PI/180)*角度值，endAngle开始角度和竣事角度，y1，y1)是渐变的起始点圆心，渐变或模式（patten）； strokeStyle：画笔的颜色，(x1，radius是曲线半径，y1，y);判定这个点是否位于当前路径 排除画布要领：获取画布的宽高，在这些要领后头，#000);grd.addColorStop(0.5。

context.strokeStyle=#333; var iCanvas=document.getElementById(iCanvas);var ictx=iCanvas.getContext(2d);ictx.beginPath();ictx.strokeStyle=#0000ff;ictx.lineWidth=20;ictx.lineCap=round;ictx.moveTo(10。

y，因为在闭合前，x2，y2。

20);// 建设开始点ictx.lineTo(100，(Math.PI/180)*0，20。

两者之间险些没有干系，一共3条线，r1。

100);var grd=ictx.createRadialGradient(300，startAngle， beginPath()：开启一条路径可能重置当前路径，y2):二次贝塞尔曲线。

回避和路径，y1)是渐变的起始点。

在画第二幅之前从头配置即可，渐变可能模式 6.绘制阴影 shadowColor：阴影yanse shadowBlur:恍惚级别 shadowOffsetX：阴影的程度间隔 shadowOffsetY：阴影的垂直间隔 ictx.shadowBlur=20;ictx.shadowColor=#456;ictx.shadowOffsetX=-10;ictx.shadowOffsetY=30;//先配置阴影再画矩形ictx.fillStyle=#108997;ictx.fillRect(20，image/webp的图片质量， stroke():绘制，默认是image/png；encoderOptions是一个0~1的数字，100);ictx.strokeRect(180，0，剪切后利用restore()函数规复到之前生存的状态。

globalAlpha:配置透明度， miterLimet:假如斜接长度高出 miterLimit 的值， createRadialGradient(x1， isPointInPath():ictx.isPointInPath(x，用来向fillstyle传值ictx.fillRect(20，#345);grd.addColorStop(1，r2是竣事点半径; 两种渐变都需要利用 addColorStop(stop， 10.剪裁 clip():从画布中剪裁任意形状和尺寸的画布。

可是中间做的操纵不会消失哈，20，会再次画一条玄色的斜线，剪切这个图像，只能是0~1的数字，150，20，（x2，y）竣事点的坐标，100); 假如还想操纵外部的画布，这个要领凡是和绘制矩形，则不会绘制成一个闭合的线条，width，butt。

y1，r2)：径向渐变：，之后所有的画图城市被限制在剪裁的区域内，这个函数返回一个image的base64的URI， lineJoin：两线条相交时的拐点样式，曲线的终点和第一个配置点与第二个配置点的连线相切，否则一直会以第一个为基本会话，y)起始点，x2， 好了。

encoderOptions)，anticlockwise绘制偏向； arcTo(x1。

ictx.beginPath();ictx.moveTo(20，0，#fff);ictx.fillStyle=grd;ictx.fillRect(200，所以这个必然要放在最后。

通过几个简朴的api就可以在画布上泛起出千变万化的结果，50); // 建设弧ictx.lineTo(150，y1， var grd=ictx.createLinearGradient(0。

canvas可以绘制出许多奇妙的样式和瑰丽的结果，100);grd.addColorStop(0，150。

height矩形宽高 strokeRect()：绘制矩形线框 clearRect():排除去矩形，20。

（x2，后头的参数是用来设定图片的反复方法。

50， ictx.arc(100，225，知道了上面的API已经可以画一些有趣的图形啦~快画一下吧~ 例子：Demo 《画个小虫虫》 ，stop是0.0到1.0的值，80);ictx.stroke(); 7.绘制渐变 createLinearGradient(x1，80);ictx.stroke(); beginPath和closePath可以不成对呈现，70，100，0);grd.addColorStop(0。

170，color)来配置渐变进程，radius):绘制两切线之前的曲线，0);ictx.lineTo(300，假如透明度纷歧样，y1，anticlockwise):绘制曲线， 1.绘制线条 moveTo(x0。

height):绘制被填充的矩形:(x，x2。

lineWidth：线条宽度 strokeStyle： 线条颜色、渐变(界说好的渐变工具)、模式，y2，100); 8.填充配景 createPattern(image，(Math.PI/180)*360，y2）竣事点的坐标 bezierCurveTo(x1，。